<template>
  <div class="groupList-wrap">
    <!-- 骨架屏 -->
    <div>
      <skeleton :skeletonFlag="skeletonFlag"></skeleton>
    </div>

    <!-- 团购列表组件 -->
    <cardGroup :goodsList="goodsList" :navto="true"></cardGroup>

  </div>
</template>

<script>
import {
  fetch, hideLoading, closeSkeleton
  // , showLoading, bindViewTap
} from '@/utils/index' // 引入公用库
import { getIndexList, getUrl } from '@/utils/api' // 请求封装公用库
// import store from '@/utils/store' // 全局状态管理

// 引入组件
import cardGroup from '@/components/cardGroup'
import skeleton from '@/components/skeleton'

export default {
  data () {
    return {
      goodsList: [], // 商品列表数据
      skeletonFlag: true // 骨架屏层控制
    }
  },
  // 引入组件可当标签使用
  components: {
    cardGroup, skeleton
  },
  // 定义自定义函数
  methods: {},
  // 在实例创建完成后被立即调用
  mounted () {
    // 请求商品列表数据
    fetch(getUrl('/groupList')).then(data => {
      this.goodsList = data.data || [] // 保存数据直接渲染
      console.log('团购列表', this.goodsList)
    }).then(() => {
      // 关闭遮罩层加载中，公用库内的方法（封装好的）
      hideLoading(300)
    }).then(() => {
      // 关闭骨架屏
      closeSkeleton(this)
    })
  },
  // 底部下拉请求更多文章列表数据（微信生命周期）
  onReachBottom (e) {
    // 请求商品列表数据
    fetch(getIndexList('/groupList', {
      page: 2
    })).then(data => {
      // 合并后面请求到的数据
      this.goodsList = [...this.goodsList, ...data.data]// 保存数据直接渲染
    }).then(() => {
      // 关闭遮罩层加载中,自定义延迟关闭时间
      hideLoading(300)
    })
  }
}
</script>

<style scope>
.groupList-wrap {
  background: #46474C;
}
</style>
